import React, {Component} from 'react';
//import pureRender from 'pure-render-decorator';
import {History, Link } from 'react-router';
import { connect } from 'react-redux';
import { TransportGet } from '../Redux/Actions/transportAction';
import { is, fromJS} from 'immutable';
import {Imglist} from './common/img';
import {UctToLocaltime} from '../Config/Util';


class Transport extends Component {
    constructor() {
        super();
        this.state = {
            
        }
    }

    componentWillMount(){
        const token = this.props.authReducer.user.data.token;
        const orderId = this.props.location.state.orderId;
        this.props.dispatch(TransportGet(token,orderId));
    }

    shouldComponentUpdate(nextProps, nextState) {
        return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state),fromJS(nextState))
    }
   
    render() {
        document.title="运输";
        const transport = this.props.transportReducer.transport.data;
        if(transport != undefined){
            return (
                <div className="main-wrap bg-grey">
                    <div className="me-info">
                        <p className="info-title">海运提单<span className="icon iconfont icon-xiala pull-right"></span></p>
                        <ul className="infoList">
                            <li>
                                <span>提单时间</span> <span>{UctToLocaltime(transport.oceanBillOfLadingDate)}</span>
                            </li>
                            <Imglist src={transport.oceanBillOfLadingUrl} alt="提单照片"/>
                        </ul>

                        <p className="info-title">装箱<span className="icon iconfont icon-xiala pull-right"></span></p>
                        <ul className="infoList">
                            <li>
                                <span>装箱时间</span> <span>{UctToLocaltime(transport.vanningDate)}</span>
                            </li>
                            <Imglist src={transport.vanningUrl} alt="装箱照片"/>
                        </ul>

                        <p className="info-title">发船<span className="icon iconfont icon-xiala pull-right"></span></p>
                        <ul className="infoList">
                            <li>
                                <span>发船时间</span> <span>{UctToLocaltime(transport.sailingDate)}</span>
                            </li>
                        </ul>

                        <p className="info-title">到港<span className="icon iconfont icon-xiala pull-right"></span></p>
                        <ul className="infoList">
                            <li>
                                <span>到港时间</span> <span>{UctToLocaltime(transport.arrivalDate)}</span>
                            </li>
                        </ul>
                    </div>

                </div>
            )
        }else{
            return <div></div>
        }
    }
}


export default connect((state) => {
    const { authReducer,transportReducer } = state;
    return {
        authReducer,transportReducer
    }
})(Transport);